<template>
  <div class="CurrentAccount">
    <div class="search">
      <span>查询日期：</span>
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyyMMdd"
        @change="setDate"
      >
      </el-date-picker>
      <el-button type="primary" @click="searchData">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
    <div class="content">
      <el-table
        v-if="tableData"
        v-loading="loading"
        max-height="550"
        border
        :data="tableData && tableData.list && tableData.list.list"
        tooltip-effect="dark"
      >
        <el-table-column
          v-for="(t, n) in tableData.fields"
          :key="n"
          :prop="t.fields"
          :label="t.translate"
          :min-width="
            flexColumnWidth(t.translate, t.fields, tableData.list.list)
          "
          align="center"
        />
      </el-table>
      <Empty v-else />
    </div>
    <div class="footer">
      <pagination
        :current-page="searchDate.pageDate.pageNum"
        :page-size="searchDate.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getCurrentAccountList } from "@/api/statisticalCenter";

export default {
  name: "CurrentAccount",
  data() {
    return {
      date: null,
      loading: true,
      searchDate: {
        endTime: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
        startTime: "",
      },
      total: 0,
      tableData: null,
    };
  },
  methods: {
    setDate(date) {
      this.searchDate.startTime = date[0];
      this.searchDate.endTime = date[1];
    },
    getTableData() {
      this.loading = true;
      getCurrentAccountList(this.searchDate).then((res) => {
        this.tableData = res.data;
        this.total = res.data.list.total;
        this.loading = false;
      });
    },
    searchData() {
      if (this.date) {
        this.searchDate.pageDate.pageNum = 1;
        this.searchDate.pageDate.pageSize = 10;
        this.getTableData();
      } else {
        this.$message.warning("请选择查询时间！");
      }
    },
    reset() {
      this.date = null;
      this.searchDate.startTime = null;
      this.searchDate.endTime = null;
    },
    handleSizeChange(size) {
      this.searchDate.pageDate.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(current) {
      this.searchDate.pageDate.pageNum = current;
      this.getTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.CurrentAccount {
  padding: 20px;
  .search {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    .el-date-editor {
      margin-right: 20px;
      width: 400px;
    }
    span {
      font-size: 14px;
      color: #606266;
    }
  }
  .content {
    margin-top: 20px;
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
